<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-vue的数据绑定获取业主的数据.html</title>
    <script src="js/vue.js"></script>

</head>
<body>

<div id="app">
        业主姓名: <input type="text" name="username" v-model="owner.username"> <br>
        业主电话: <input type="text" name="tel" v-model="owner.tel"> <br>
        性别:
    <input type="radio" name="sex" value="nan" v-model="owner.sex"> 男
    <input type="radio" name="sex" value="nv" checked v-model="owner.sex"> 女 <br>
        身份证 : <input type="text" name="id" v-model="owner.idNo"> <br>
        编号 :
        <select name="no" v-model="owner.houseNO">
            <option value="">选择编号</option>
            <option value="1001">1001</option>
            <option value="1002">1002</option>
            <option value="1003">1003</option>
        </select>
        <br>
        备注信息 : <textarea cols="30" rows="3" name="remark" v-model="owner.remark"> </textarea>
        <br>
        <input type="button" value="提交数据" @click="addOwner()">
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            owner:{
                username:"",
                tel:"",
                sex:"",
                idNo:"",
                houseNO:"",
                remark:""
            }
        },
        methods:{
            addOwner(){
                console.log(JSON.stringify(this.owner))
            }
        }
    })
</script>

</body>
</html>